<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:40
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:21:53
 * @FilePath: \i-hos-app\shared\emr\src\components\insert\Table.vue
 * @Description: 表格插入组件
-->
<template>
  <div>
    <div class="table">
      <div class="left">
        <TableEdit @toAddTableRowCell="creatTable" />
      </div>
      <div class="right">
        <ContextMenu type="2" />
      </div>
    </div>
    <div ref="refInsertComponent" style="display: none">
      <table class="flexibleTable" border="0" cellspacing="0" cellpadding="0" :data-config="JSON.stringify(config)">
        <colgroup>
          <col style="width: 60px" v-for="c in tdRowCell.cell" :key="'col' + c" />
        </colgroup>
        <tbody>
          <tr v-for="r in tdRowCell.row" :key="'tr' + r">
            <td v-for="c in tdRowCell.cell" :key="'td' + c"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, nextTick, Ref } from 'vue'
  // 接口约束
  import { IRowCell, IConfig } from '../../interface/page'
  import { reactive } from 'vue'
  // 组件插入hooks
  import { useInsertComponent } from '../../hooks/useInsertComponent'
  // 引入公共组件
  import TableEdit from '../../components/common/TableEdit.vue' // 引入菜单栏组件
  import ContextMenu from '../../components/common/ContexMenu.vue' // 引入菜单栏组件

  // 初始化添加表格行列
  let tdRowCell: Ref<IRowCell> = ref({
    row: 0,
    cell: 0,
  })
  const refInsertComponent: Ref<HTMLElement | null> = ref(null)
  let config: IConfig = reactive({
    type: '表格',
  })

  // 动态创建表格
  const creatTable = (flag: Ref<IRowCell>): void => {
    tdRowCell.value = flag.value
    nextTick(() => {
      // 向电子病历页面插入的组件
      useInsertComponent(refInsertComponent.value as HTMLElement)
    })
  }
</script>

<style scoped lang="scss">
  .table {
    display: flex;
    .left {
      margin-right: 15px;
      .tdNum {
        font-size: var(--theme-font-size);
        span {
          font-size: 16px;
        }
      }
    }
    .right {
      .contexMenu {
        box-shadow: none;
        margin-top: 18px;
      }
    }
  }
  .flexibleTable {
    border-collapse: collapse;
    word-break: break-all;
    display: inline-block;
    td {
      height: 1.5em;
      border: 1px solid #000;
    }
  }
</style>
